<template>
<div>
<el-card class="box-card" >
	<div slot="header" class="clearfix">
		<span>字典管理</span>
	</div>
	<el-row>
	<el-form :inline="true" :model="form" >
		<el-form-item >
		    <el-input v-model="form.label" placeholder="标签"></el-input>
		</el-form-item>
		<el-form-item >
		    <el-input v-model="form.description" placeholder="描述"></el-input>
		</el-form-item>
		<el-form-item >
		    <el-input v-model="form.type" placeholder="类型"></el-input>
		</el-form-item>
		<el-form-item>
		    <el-button type="primary" @click="init">查询</el-button>
		</el-form-item>
		<el-form-item>
		    <el-button type="success" @click="add">创建</el-button>
		</el-form-item>
	</el-form>
	</el-row>

	<el-row>
	<el-table
	    :data="list.results"
	    :header-cell-style="{
			'background-color': '#f4f4f5',
		    'color': '#616161',    
		}"
	    border
	    style="width: 100%">
	    <el-table-column
	      prop="value"
	      label="键值"
	      width="200">
	    </el-table-column>
	    <el-table-column
	      prop="label"
	      label="标签名">
	    </el-table-column>
	    <el-table-column
	      prop="type"
	      label="类型"
	      width="200">
	    </el-table-column>
	    <el-table-column
	      prop="description"
	      label="描述"
	      width="200">
	    </el-table-column>
	    <el-table-column
	      prop="sort"
	      label="排序"
	      width="200">
	    </el-table-column>
	    <el-table-column
	      width="100"
	      label="操作">
	      	<template slot-scope="scope">
	      		<el-button type="success" size="mini" 
	      		icon="el-icon-edit" circle
	      		@click="edit(scope.row)">
	      		</el-button>
	      		<el-button type="danger" size="mini" 
	      		icon="el-icon-delete" circle
	      		@click="del(scope.row)">
	      		</el-button>
	      	</template>
	    </el-table-column>
	  </el-table>
	</el-row>

	<el-row class="text-right mt20 mb20">
	<el-pagination
	  @size-change="handleSizeChange"
	  @current-change="handleCurrentChange"
	  :current-page="pageNo"
	  :page-size="pageSize"
	  layout="total, sizes, prev, pager, next"
	  :total="list.totalRecord">
	</el-pagination>
</el-row>
</el-card>

<el-dialog
  title="帮助手册"
  :visible.sync="dialogVisible"
  width="600px">
  
  	<el-form ref="form" :model="current" label-width="130px">

		<el-form-item label="键值："  >
			<el-input v-model="current.value" style="width:300px;"></el-input>
		</el-form-item>

		<el-form-item label="标签名："  >
			<el-input v-model="current.label" style="width:300px;"></el-input>
		</el-form-item>


		<el-form-item label="类型："  >
			<el-input v-model="current.type" style="width:300px;"></el-input>
		</el-form-item>

		<el-form-item label="描述："  >
			<el-input v-model="current.description" style="width:300px;"></el-input>
		</el-form-item>

		<el-form-item label="排序："  >
			<el-input v-model="current.sort" style="width:300px;"></el-input>
		</el-form-item>

		<el-form-item label="备注："  >
			<el-input v-model="current.remark" style="width:300px;"></el-input>
		</el-form-item>

	</el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">保 存</el-button>
  </span>
</el-dialog>


</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'wordbookList',
	
	data () {
		return {
		  	list : {},

		  	form : {},

		  	pageNo : 1,
		  	pageSize : 10,

		  	current : {},

		  	dialogVisible : false,
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		init () {
			this.$http({
				fun : 'dictList',
				...this.form,
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				cb : res => {
					console.log(res);
					this.list = res;
				}
			});

		},

		add () {
			this.dialogVisible = true;
			this.current = {
				sort : 0,
			};
		},

		edit (item) {
			console.log(item);
			this.current = item;
			this.dialogVisible = true;
		},

		del (item) {
			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {

	        	this.$http({
	        		fun : 'createDict',
	        		id : item.id,
	        		del_flag : 1,
	        		cb : res => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.init();
	        		},
	        		err : res => {
	        			this.$message({
							type: 'error',
							message: '删除失败!'
						});
	        		}
	        	});
	          
	        }).catch(() => {
	                   
	        });
		},

		save () {
			this.$http({
				fun : 'createDict',
				...this.current,
				cb : res => {
					console.log(res);
					this.$message.success('操作成功');
					this.dialogVisible = false;
					this.init();
				}
			})
		},

		handleSizeChange (val) {
			this.pageSize = val;
			this.init();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.init();
		},

		


	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
